<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <td>
                    <input type="checkbox" v-model="isCheckAll" @change="allCheckHandle">
                </td>
                <td>编号</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr v-for="(goods,index) in goodsList">
                <td>
                    <input type="checkbox" v-model="goods.isChecked" @change="backCheckAll">
                </td>
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.price}}</td>
                <td>
                    <input type="button" value=" - " @click="reduce(index)">
                    {{goods.count}}
                    <input type="button" value=" + " @click="add(index)" />
                </td>
                <td>{{goods.price*goods.count}}</td>
                <td>
                    <input type="button" value="删除" @click="remove(index)">
                </td>
            </tr>
        </table>
        <p>商品数量：{{totalCount()}}，合计：¥{{totalMoney()}}</p>
    </div>
    <script src="./js/vue.js"></script>

    <script>
// 功能分析：
// 1、数据显示【已ok】
// 2、加号功能【已ok】
// 3、减号功能【已ok】
// 4、删除功能 【已ok】
// 5、总数量功能【已ok】
// 6、全选功能【已ok】
// 7、合计功能【已ok】

        let vm = new Vue({
            el: "#app",
            data: {
                isCheckAll:false,
                goodsList: [
                    {
                        isChecked:false,
                        id: "01001",
                        name: "铅笔",
                        price: 1.5,
                        count: 1,
                        limit:10
                    },
                    {
                        isChecked:true,
                        id: "01002",
                        name: "钢笔",
                        price: 45,
                        count: 1,
                        limit:5
                    },
                    {
                        isChecked:false,
                        id: "01003",
                        name: "签字笔",
                        price: 2.5,
                        count: 3
                    },
                    {
                        isChecked:false,
                        id: "01004",
                        name: "毛笔",
                        price: 35,
                        count: 2
                    }
                ]
            },
            methods: {
                allCheckHandle(){
                    this.goodsList.forEach(item=>item.isChecked=this.isCheckAll);
                },
                backCheckAll(){
                    this.isCheckAll =this.goodsList.every(item=>item.isChecked);
                },
                add(idx){
                    if(this.goodsList[idx].limit){
                        if(this.goodsList[idx].count+1>this.goodsList[idx].limit){
                            return ;
                        }
                    }
                    this.goodsList[idx].count++;
                },
                reduce(idx){
                    if(this.goodsList[idx].count<=1){ //良性冗余
                        this.goodsList[idx].count = 1;
                        return;
                    }
                    this.goodsList[idx].count--;
                },
                remove(idx){
                    if(confirm("亲，您真的要删除吗？")){
                        this.goodsList.splice(idx,1);
                    }
                },
                totalCount(){
                    return this.goodsList.reduce((sum,item)=>{
                        return sum + (item.isChecked?item.count:0);
                    },0);
                },
                totalMoney(){
                    return this.goodsList.reduce((sum,item)=>{
                        return sum + (item.isChecked?(item.count*item.price):0);
                    },0);
                }
            }
        })

    </script>
</body>

</html>